<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-16 11:38:36
 * @LastEditors: william
 * @LastEditTime: 2025-09-03 15:24:39
-->
<template>
  <div
    ref="refChart"
    :class="className"
    :style="{ height: height, width: width, 'min-height': '120px' }"
  />
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'nw-chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  autoResize: {
    type: Boolean,
    default: true
  }
})

const refChart = ref(null)
const myChart = ref(null)

watch(
  () => props.chartData,
  () => {
    setOptions()
  },
  { deep: true }
)

onMounted(_ => {
  nextTick(() => {
    useChartMixin({
      refChart,
      myChart,
      setOptions
    }).initChart()
  })
})

const setOptions = _ => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '30px',
      left: '15px',
      right: '15px',
      bottom: '0',
      containLabel: true
    },
    color: g_style.chartColorArr.split(','),
    xAxis: {
      type: 'category',
      boundaryGap: 20,
      data: Array.from({ length: 15 }, (_, i) =>
        g_dayjs().subtract(i, 'day').format('MM-DD')
      ).reverse(), // 利用Dayjs生成最新的15天日期
      axisLine: {
        lineStyle: {
          color: '#666666'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '工作时长/小时',
        axisLine: {
          lineStyle: {
            color: '#666666'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#dddddd'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        data: Array.from({ length: 15 }, (_, i) =>
          (Math.random() * 200 + 10).toFixed(0)
        )
      }
    ]
  }
  myChart.value &&
    myChart.value.setOption &&
    myChart.value.setOption(option, true)
}
</script>
